<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="xmy6364">
    <meta name="description" content="想要成为大佬">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/github-gist.min.css">
    <link rel="stylesheet" href="/assets/lib/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/layout.css" />
    <script defer src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script defer src="/assets/js/copyCode.js"></script>
    <script defer src="/assets/js/backTop.js"></script>
    <script defer src="/assets/js/tool.js"></script>

    
  <link rel="stylesheet" href="/assets/css/page.css" />
  <link rel="stylesheet" href="/assets/css/sidebar.css" />
  <link rel="stylesheet" href="/assets/css/footer.css" />


    <title>梦的博客</title>
  </head>
  <body>
    <div class="container">
      <aside>
        
  <div class="sidebar">
  <header>梦的博客</header>
  <div class="info">
    <div class="avatar">
      <img src="https://cdn.jsdelivr.net/gh/xmy6364/blog-image/img/pixelartoc_1.png" alt="头像">
    </div>
    <div class="author">xmy6364</div>
    <div class="description">想要成为大佬</div>
    <div class="about">
      <a href="/about">about me.</a>
    </div>
  </div>
  <div class="links">
    <ul>
    
      <li class="links-item">
        <a href="https://github.com/xmy6364" target="_blank">
          <i class="fa fa-github-alt" aria-hidden="true"></i>
        </a>
      </li>
    
      <li class="links-item">
        <a href="tencent://message/?uin=1176281967" target="_blank">
          <i class="fa fa-qq" aria-hidden="true"></i>
        </a>
      </li>
    
    </ul>
  </div>
  <nav>
    <ul>
    
      <li class="nav-item">
        <a href="/archives">
          <span class="nav-item__count">33</span>
          <span class="nav-item__label">归档</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/categories">
          <span class="nav-item__count">2</span>
          <span class="nav-item__label">分类</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/tags">
          <span class="nav-item__count">45</span>
          <span class="nav-item__label">标签</span>
        </a>
      </li>
    
    </ul>
  </nav>
  <div class="catalogue" id="catalogue"></div>
</div>

      </aside>
      <main>
        
  <div class="post-list">
  
  <div class="post-item" style="--i: 0">
  <div class="post-item__title">
  <a href="/categories/工具/use-github-actions-publish-npm-package">
    使用Github Actions自动化发布npm包的探索
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/05/28
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      工具
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>最近编写了一个封装了前端存储 API 的工具库<a href="https://www.npmjs.com/package/symstorage">symstorage</a>，准备将它发布在 npm 上方便以后使用，不过如果每次都手动从本地打包发布的话就会非常麻烦，因此这次尝试一下自动化发布。</p>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/工具/use-github-actions-publish-npm-package">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    Github Actions
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    CI
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 1">
  <div class="post-item__title">
  <a href="/categories/技术/eventloop">
    JavaScript的事件循环机制（Event Loop）
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/05/17
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>事件循环机制是JavaScript运行的核心，因此要想写出bug少的js代码就必须要了解这个机制是如何运作的，以及为什么会有这个机制。</p>
<p>本篇文章是我对Event Loop的理解</p>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/eventloop">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    JavaScript
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 2">
  <div class="post-item__title">
  <a href="/categories/技术/difference-between-src-and-href">
    浅谈src与href的区别
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/05/09
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>src 和 href 都是用来引入外部资源的属性，例如：图片、视频、CSS 文件、JavaScript 文件等。
那么它们两者之间究竟有什么样的区别呢？</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622195739979">复制</button><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;style.css&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;pic.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;pic&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;script.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<b class="name">html</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622195739979"><link href="style.css" rel="stylesheet" />
<img src="pic.png" alt="pic" />
<script src="script.js"></script>
</textarea>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/difference-between-src-and-href">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    html
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 3">
  <div class="post-item__title">
  <a href="/categories/技术/chrome-extension-getimage">
    Chrome插件开发入门
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/04/18
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>最近学习了Chrome插件的开发，总体来说上手还是很容易的，因为浏览器插件本质上依旧是网页，写几个demo基本就了解了他的开发过程。</p>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/chrome-extension-getimage">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    chrome
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    JavaScript
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    extension
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 4">
  <div class="post-item__title">
  <a href="/categories/技术/makewebpackmultipage">
    使用Webpack构建多页面程序
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/03/15
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>使用webpack搭建单页面程序十分常见，但在实际开发中我们可能还会有开发多页面程序的需求，因此我研究了一下如何使用webpack搭建多页面程序。</p>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/makewebpackmultipage">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    webpack
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    JavaScript
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 5">
  <div class="post-item__title">
  <a href="/categories/技术/package-a-markdown-editor-for-react-native">
    React Native中使用Markdown编辑器
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/02/17
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>最近在研究<code>React Native</code>，准备用它写一个笔记APP，但是并没有搜到很好用的编辑器插件，因此准备使用<code>WebView</code>和已有的Web端编辑器自己封装一个。</p>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/package-a-markdown-editor-for-react-native">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    React Native
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    WebView
  </a>
  
</div>

  </div>
  
  <div class="post-item" style="--i: 6">
  <div class="post-item__title">
  <a href="/categories/技术/asimplestaticbloggenerate">
    实现一个简单的静态博客生成器
  </a>
</div>
<div class="post-item__desc">
  <p class="post-item__desc-date">
    <i class="fa fa-calendar" aria-hidden="true"></i>
    2021/02/07
  </p>
  <p class="post-item__desc-category">
    <i class="fa fa-folder-o" aria-hidden="true"></i>
    <a href="/categories">
      技术
    </a>
  </p>
</div>
<div class="post-item__abstract">
  <p class="post-item__abstract-content"><p>作为一名程序员，写博客是积累知识、提升水平必不可少的一个方法。我们写博客主要有三种方法，一种是使用掘金、博客园、CSDN等博客网站，第二种是自己搭建网站，存放自己的博客，第三种就是使用静态博客生成器，将生成的网页部署到服务器或者github pages、gitee pages等服务上。</p>
<p>这三种方法中，第一种自由度太低，并且定制样式很麻烦；第二种每写一篇博客都要新建个页面，非常麻烦。因此我选择了第三种方法，在使用了hexo、vuepress，gridea等多种静态博客生成器后，我决定自己写一个来提升自己的能力。</p>
<blockquote>
<p>项目地址：<a href="https://github.com/xmy6364/CoinRailgun">https://github.com/xmy6364/CoinRailgun</a></p>
</blockquote>
</p>
  <p class="more" style="display:none;">
    <a href="/categories/技术/asimplestaticbloggenerate">查看更多</a>
  </p>
</div>
<div class="post-item__tags">
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    nodejs
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    JavaScript
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    blog
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    website
  </a>
  
  <a href="/tags">
    <i class="fa fa-tag" aria-hidden="true"></i>
    cli
  </a>
  
</div>

  </div>
  
</div>
<div class="pagination">
  <ul>
  
    <li class="current">
      <a href="/page/1">1</a>
    </li>
  
    <li class="">
      <a href="/page/2">2</a>
    </li>
  
    <li class="">
      <a href="/page/3">3</a>
    </li>
  
    <li class="">
      <a href="/page/4">4</a>
    </li>
  
    <li class="">
      <a href="/page/5">5</a>
    </li>
  
    <li class="next">
      <a href="/page/2">下一页</a>
    </li>
  
  </ul>
</div>

        <footer>
        
  <div class="footer">
  
  <div class="theme">
    博客主题为 <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a> 默认主题
  </div>
  <div class="copyright">
    <span>© 2019-2021 xmy6364.</span>
    <span>Powered by <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a></span>
  </div>
</div>

        </footer>
      </main>
    </div>
  </body>
</html>
